<template>
  <div class="com-container">
    <h3 class="title">学习人数统计</h3>
    <div class="cards-container">
      <div class="card">
        <div class="card-img" style="background-color: #3b82f6;">
<!--          <i class="fa fa-laptop"></i>-->
          <el-icon><Printer /></el-icon>
        </div>
        <div class="card-content statistic-row">
          <el-statistic class="statistic-item" title="总次数" :value="total" >
            <template #prefix>
              <el-icon class="icon"><user /></el-icon>
            </template>
          </el-statistic>
        </div>
      </div>

        <div class="card">
          <div class="card-img" style="background-color: #10b981;">
<!--            <i class="fa fa-leaf"></i>-->
            <el-icon><Coffee /></el-icon>
          </div>
          <div class="card-content">
            <el-statistic
                class="statistic-item"
                title="总人数"
                :value="peopleSet.size"
                :precision="0"
            >
              <template #prefix>
                <el-icon class="icon"><Connection /></el-icon>
              </template>
            </el-statistic>
          </div>
        </div>

        <!-- 卡片3 -->
        <div class="card">
          <div class="card-img" style="background-color: #f59e0b;">
<!--            <i class="fa fa-lightbulb"></i>-->
            <el-icon><MilkTea /></el-icon>
          </div>
          <div class="card-content">
            <el-statistic
                class="statistic-item"
                title="今日新增"
                :value="todayNum"
                :precision="0"
            >
              <template #prefix>
                <el-icon class="icon"><plus /></el-icon>
              </template>
            </el-statistic>
          </div>
        </div>

        <!-- 卡片4 -->
        <div class="card">
          <div class="card-img" style="background-color: #ef4444;">
<!--            <i class="fa fa-heart"></i>-->
            <el-icon><IceTea /></el-icon>
          </div>
          <div class="card-content">
            <el-statistic
                class="statistic-item"
                title="本月新增"
                :value="monthNum"
                suffix="个"
            >
              <template #prefix>
                <el-icon class="icon"><clock /></el-icon>
              </template>
            </el-statistic>
          </div>
        </div>

      </div>
    </div>
</template>

<script>
import {listStudy_record} from "@/api/chart/charts.js";
// import '@/assets/styles/fontawesome.css'
import {Clock, Plus, User, Connection, Coffee, MilkTea, IceTea, Printer} from "@element-plus/icons-vue";
import {formatDate, formatMonth} from "@/utils/index.js";
export default {
  components: {Printer, IceTea, MilkTea, Coffee, Connection, Clock, Plus, User},
  data() {
    return {
      list: [],
      total: 0,
      todayNum: 0,
      monthNum: 0,
      peopleSet: new Set(),
    }
  },
  created() {
    this.init()
  },
  mounted() {
    window.addEventListener('resize', this.screenAdapter)
  },
  screenAdapter() {
    this.chartInstance.resize()
  },
  methods: {
    init() {
      let query = {}
      listStudy_record(query).then(res => {
        if (res.code === 200) {
          // console.log(res)
          this.total = res.data.length
          this.list = res.data
          this.getPeopleNum(this.list)
        }
      })
    },
    getPeopleNum(data){
      const date = formatDate();
      const month = formatMonth();
      this.todayNum = 0
      this.monthNum = 0
      data.forEach((item) => {
        // console.log(item)
        if (item.createTime.indexOf(date) > -1) {
          this.todayNum ++ 
        }
        if (item.createTime.indexOf(month) > -1) {
          this.monthNum ++
        }
        this.peopleSet.add(item.userName)
      })
      // console.log(date)
    },
  }
}
</script>

<style scoped>

.com-container {
  width: 100%;
  height: 300px;
  position: relative;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.card {
  background-color: white;
  border-radius: 8px;
  align-items: center;
  overflow: hidden;
  margin-top: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.card-img {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
}

.card-content {
  padding: 1.2rem;
}

/* 核心：用 Flex 实现同行显示 */
.statistic-row {
  display: flex; /* 启用 Flex 布局 */
  flex-wrap: wrap; /* 屏幕较小时自动换行 */
}

.statistic-item {
  flex: 1; /* 每个统计项平均分配宽度 */
  padding-left: 15px;
  background: #f9fafb;
  border-radius: 6px;
}

/* 图标样式 */
.icon {
  color: #409eff;
  margin-right: 8px;
}

.title {
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 2rem;
  display: block;
  font-size: 16px;
  font-weight: bold;
}
</style>
